<template>
    <el-card class="content">
        <div class="title">尾矿库风险等级示意图</div>
        <img
                class="img"
                src="../../../assets/safety-technology/hidden-danger-investigation/FourColor.gif"
                alt=""
        />
        <el-row>
            <el-col :span="4">风险等级：</el-col>
            <el-col :span="5"><el-button type="primary">A级——蓝色</el-button></el-col>
            <el-col :span="5"><el-button style="background:yellow">B级——黄色</el-button></el-col>
            <el-col :span="5"><el-button type="warning">C级——橙色</el-button></el-col>
            <el-col :span="5"><el-button type="danger">D级——红色</el-button></el-col>
        </el-row>
        <el-row>
            <el-col :span="4">撤离路线：</el-col>
            <el-col :span="5"><img src="../../../assets/safety-technology/hidden-danger-investigation/箭头.png" alt=""></el-col>
        </el-row>
    </el-card>
</template>

<script>
    export default {
        name: "FourColor",
    };
</script>

<style scoped>
    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 87vh;
        margin-right: 5px;
    }
    .title {
        font-size: 36px;
        text-align: center;
    }
    .img {
        width: auto;
        max-width: 100%;
        height: 50vh;
    }
    .el-row {
        margin: 10px 80px;
    }
    .el-row >>> .el-button {
        width: 150px;
    }
</style>